<template>
  <div>
    <!-- 自定义步骤条 -->
    <div class="custom-steps">
      <el-steps align-center style="width: 100%;" :active="activeStep" finish-status="success">
        <el-step v-for="(value, index) in steps" :key="index"  :title="value.title" />

      </el-steps>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits } from "vue";



const props = defineProps<{
  activeStep: number;
  steps: Step[];
}>();


</script>

<style scoped lang="less">
.custom-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

// 成功步骤的样式 - 只有圆圈背景为蓝色
:deep(.el-step__head.is-success) {
  border-color: var(--el-color-primary) !important;

  .el-step__icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
    border-width: 2px !important;
    background-color: var(--el-color-primary) !important;
    border-color: var(--el-color-primary) !important;

    .el-icon {
      color: white !important;
      font-weight: 700;
      font-size: 22px;
    }
  }
}

// 成功步骤标题样式
:deep(.el-step__title.is-success) {
  color: var(--el-color-primary) !important;
  font-weight: 500;

}

// 进行中步骤的头部样式 - 只有圆圈边框为蓝色
:deep(.el-step__head.is-process) {
  border-color: var(--el-color-primary) !important;

  .el-step__icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
    border-width: 2px !important;
    color: var(--el-color-primary) !important;
    background-color: white !important;
    border-color: var(--el-color-primary) !important;
  }
}

// 进行中步骤标题样式
:deep(.el-step__title.is-process) {
  color: var(--el-color-primary) !important;
  font-weight: 500;

}

// 等待步骤的样式
:deep(.el-step__head.is-wait) {
  .el-step__icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
    border-width: 2px !important;
    background-color: white !important;
    border-color: #c0c4cc !important;
    color: #c0c4cc !important;
  }
}

// 步骤图标通用样式调整（增大圆圈）
:deep(.el-step__icon) {
  width: 32px !important;
  height: 32px !important;
  font-size: 14px !important;
  border-width: 2px !important;
  border-style: solid !important;
}

// 步骤线样式调整
:deep(.el-step__line) {
  top: 16px !important;
}

// 确保对勾图标正确显示为白色
:deep(.el-step__icon .el-icon-check) {
  color: white !important;
  font-weight: bold;
  font-size: 16px !important;
}

// 步骤描述区域样式
:deep(.el-step__main) {
  margin-top: 8px !important;
}
:deep(.el-step__icon-inner){
  font-size: 20px;
}

</style>
